<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<div class="ui container" style="margin-top: 40px;">
    <form class="ui form" th:action="@{/add}" method="post" th:object="${user}" style="margin-left: 35%">
        <input type="hidden" th:value="*{id}" name="id">
        <div class="field" style="width: 300px">
            <label>id</label>
            <input type="text" name="id" placeholder="id 默认不可修改" required th:value="*{id}" disabled>
        </div>
        <div class="field" style="width: 300px">
            <label>姓名</label>
            <input type="text" name="name" placeholder="请输入姓名" required th:value="*{name}" onkeyup="value=value.replace(/[\d]/g,'')" maxlength="10">
        </div>
        <div class="field" style="width: 300px">
            <label>学号</label>
            <input type="text" name="sno" placeholder="请输入学号" required th:value="*{sno}" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="10">
        </div>
        <div class="field" style="width: 300px">
            <label>专业</label>
            <input type="text" name="major" placeholder="请输入专业" required th:value="*{major}" maxlength="8">
        </div>
        <div class="field" style="width: 300px">
            <label>邮箱</label>
            <input type="text" name="email" placeholder="请输入邮箱" required th:value="*{email}" id="email">
        </div>
        <div class="field" style="width: 300px">
            <label>地址</label>
            <input type="text" name="address" placeholder="请输入地址" required th:value="*{address}" maxlength="12">
        </div>
        <button class="ui button blue" type="submit">提交</button>
    </form>
    <div class="ui success  message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon"></i>
        <div class="header">提示：</div>
        <p th:text="${message}"></p>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $(".message .close").on('click',function () {
        $(this).closest(".message")
            .transition("fade");
    })
    email.onchange = function(){
        var email = this.value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(email)){
            alert("邮箱格式不正确");
        }
    }
</script>
</body>
</html>